<template>
  <div>
    <svg width="336" height="150" class="text">
      <!-- 定义渐变颜色 -->
      <defs>
        <linearGradient id="geekColor" gradientTransform="rotate(90)">
          <stop offset="0%" stop-color="#ede3e7">
            <!-- 渐变动画 -->
            <animate
              attributeName="stop-color"
              values="#ee3f4d;#f1939c;#f03752"
              dur="10s"
              begin="0s"
              repeatCount="indefinite"
            />
          </stop>

          <stop offset="100%" stop-color="#0baafc">
            <animate
              attributeName="stop-color"
              values="#d0dfe6;#0bfcee;#1177b0"
              dur="10s"
              begin="0s"
              repeatCount="indefinite"
            />
          </stop>
        </linearGradient>
      </defs>

      <!-- <text class="logo_text" x="0" y="100">铁路客车智慧轮轴检修管理系统</text> -->
      <text class="logo_text" x="0" y="100">{{name}}</text>
    </svg>
  </div>
</template>

<script>
export default {
  props:{
    name:{
      type: String, default: '小笑残虹'
    }
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.logo_text {
  font-family: "PingFang SC";
  font-size: 84px;
  fill: none;
  stroke: url("#geekColor");
  stroke-width: 1;
  stroke-dasharray: 10 800;
  stroke-dashoffset: 10;
  animation: 3s linear 0s drawing forwards;
}

/* 绘画动画 */
@keyframes drawing {
  to {
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
  }
}
</style>
